import { Meta } from '@storybook/addon-docs';

<Meta title="Design system/Buttons" />

<h1 class="text-xl font-semibold mb-lg">Buttons</h1>

<h2 class="text-lg font-semibold mb-md">Default Buttons</h2>

<div class="mb-md">
  <h3 class="text-lg text-muted mb-xs">Default</h3>
  <p class="mb-md text-muted mb-0">
    The default button should be used in the vast majority of circumstances.
  </p>
  <p class="mb-md text-muted mb-sm">
    There is also a destructive variant for actions which cause destructive
    actions.
  </p>
  <button
    type="button"
    class="
        inline-flex 
        items-center 
        font-semibold
        text-gray-600
        h-btn
        px-sm
        mr-sm
        bg-gray-50
        bg-gradient-to-t
        from-transparent
        to-white
        border
        border-gray-300
        rounded 
        shadow-sm
        hover:border-gray-400
        focus:outline-none 
        focus:bg-gradient-to-t
        focus:from-bg-gray-50
        focus:to-bg-gray-50
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      "
  >
    Default Button
  </button>
  <button
    type="button"
    class="
        inline-flex 
        items-center 
        font-semibold
        text-red-600
        h-btn
        px-sm
        mr-sm
        bg-gray-50
        bg-gradient-to-t
        from-transparent
        to-white
        border
        border-gray-300
        rounded 
        shadow-sm
        hover:border-gray-400
        focus:outline-none 
        focus:bg-gradient-to-t
        focus:from-bg-gray-50
        focus:to-bg-gray-50
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      "
  >
    Destructive Button
  </button>
</div>

<div class="mb-md">
  <h3 class="text-lg text-muted mb-xs">Default - Small Buttons</h3>
  <p class="mb-md text-muted mb-0">
    Small buttons can be used for inline or tabular controls.
  </p>
  <p class="mb-md text-muted mb-sm">
    We should aim to use this control more sparingly than we currently use it
    (defaulting to default height more often).
  </p>
  <button
    type="button"
    class="
        inline-flex 
        items-center 
        font-semibold
        text-gray-600
        h-btnsm
        px-sm
        mr-sm
        bg-gray-50
        bg-gradient-to-t
        from-transparent
        to-white
        border
        border-gray-300
        rounded 
        shadow-sm
        hover:border-gray-400
        focus:outline-none 
        focus:bg-gradient-to-t
        focus:from-bg-gray-50
        focus:to-bg-gray-50
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      "
  >
    Default Button
  </button>
  <button
    type="button"
    class="
        inline-flex 
        items-center 
        font-semibold
        text-red-600
        h-btnsm
        px-sm
        mr-sm
        bg-gray-50
        bg-gradient-to-t
        from-transparent
        to-white
        border
        border-gray-300
        rounded 
        shadow-sm
        hover:border-gray-400
        focus:outline-none 
        focus:bg-gradient-to-t
        focus:from-bg-gray-50
        focus:to-bg-gray-50
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      "
  >
    Destructive Button
  </button>
</div>

<div class="mb-lg">
  <h3 class="text-lg text-muted mb-xs">Default - Icon Buttons</h3>
  <p class="mb-md text-muted mb-sm">
    Icons can be included in buttons - generally `w-4` is a good size for small
    buttons, while `w-5` is good for default buttons.
  </p>
  <div class="flex items-center">
    <button
      type="button"
      class="
          flex 
          items-center 
          font-semibold
          text-gray-600
          h-btnsm
          px-sm
          mr-sm
          bg-gray-50
          bg-gradient-to-t
          from-transparent
          to-white
          border
          border-gray-300
          rounded 
          shadow-sm
          hover:border-gray-400
          focus:outline-none 
          focus:bg-gradient-to-t
          focus:from-bg-gray-50
          focus:to-bg-gray-50
          focus:ring-2 
          focus:ring-offset-2 
          focus:ring-yellow-400
        "
    >
      <svg
        class="w-4 h-4 mr-xs fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
      </svg>
      Default Button
    </button>
    <button
      type="button"
      class="
          flex 
          items-center 
          font-semibold
          text-gray-600
          h-btn
          px-sm
          mr-sm
          bg-gray-50
          bg-gradient-to-t
          from-transparent
          to-white
          border
          border-gray-300
          rounded 
          shadow-sm
          hover:border-gray-400
          focus:outline-none 
          focus:bg-gradient-to-t
          focus:from-bg-gray-50
          focus:to-bg-gray-50
          focus:ring-2 
          focus:ring-offset-2 
          focus:ring-yellow-400
        "
    >
      <svg
        class="w-5 h-5 mr-xs fill-current"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
      >
        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
      </svg>
      Default Button
    </button>
  </div>
</div>

<h2 class="text-lg font-semibold mb-md">Primary Button</h2>

<div class="mb-lg">
  <h3 class="text-lg text-muted mb-xs">Primary</h3>
  <p class="mb-md text-muted mb-0">The primary button style should only be used once per page for create / persistent actions, we also shouldn't have any other sizes for the primary button.</p>
  <p class="mb-md text-muted mb-sm">(The only exception to the one-per-page rule would be use in inline forms - such as forms in-page in card controls).</p>

  <button type="button" class="
        inline-flex 
        items-center 
        font-semibold
        text-gray-600
        h-btn
        px-sm
        mr-sm
        bg-primary
        bg-gradient-to-t
        from-primary
        to-primary-light
        border
        border-primary-dark
        rounded 
        shadow-sm
        hover:border-primary-darker
        focus:outline-none
        focus:bg-gradient-to-t
        focus:from-primary
        focus:to-primary
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      ">Default Button
  </button>
</div>

<h2 class="text-lg font-semibold mb-xs">Dropdown Buttons</h2>
<p class="mb-md text-muted mb-sm">
  Dropdowns should be used sparingly for nested auxillary controls.
</p>

<div class="relative text-left">
  <button type="button" class="
        inline-flex 
        items-center 
        font-semibold
        text-gray-600
        h-btn
        px-sm
        mr-sm
        bg-gray-50
        bg-gradient-to-t
        from-transparent
        to-white
        border
        border-gray-300
        rounded 
        shadow-sm
        hover:border-gray-400
        focus:outline-none 
        focus:bg-gradient-to-t
        focus:from-bg-gray-50
        focus:to-bg-gray-50
        focus:ring-2 
        focus:ring-offset-2 
        focus:ring-yellow-400
      ">
      Dropdown

  </button>

  <div class="origin-top-left absolute left-0 mt-xs max-w-xs rounded shadow-md bg-white ring-1 ring-gray-300 divide-y divide-gray-50 focus:outline-none" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" role="menuitem" tabindex="-1" id="menu-item-0">Edit</a>
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" tabindex="-1" id="menu-item-1">Duplicate</a>
    </div>
    <div class="py-1" role="none">
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" role="menuitem" tabindex="-1" id="menu-item-2">Archive</a>
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" role="menuitem" tabindex="-1" id="menu-item-3">Move</a>
    </div>
    <div class="py-1" role="none">
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" role="menuitem" tabindex="-1" id="menu-item-4">Share</a>
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50" role="menuitem" tabindex="-1" id="menu-item-5">Add to Favorites</a>
    </div>
    <div class="py-1" role="none">
      <a href="#!" class="block mx-xs px-sm py-xs rounded hover:bg-gray-50 text-red-600" role="menuitem" tabindex="-1" id="menu-item-6">
        Delete
      </a>
    </div>
  </div>
</div>
